<template>
	<gui-page ref="guipage" :fullPage="true">
		<template v-slot:gBody>
			<view class="header" id="header">
				<gui-a-header title="职业培训"></gui-a-header>
				<view class="search flex-ac-jb">
					<view class="flex1">
						<gui-search2 :disabled="true" @tapme="$u.to(`/pages/search/search?type=2`)"
							:customClass="['bgfff','border']" height="53rpx" borderRadius="14rpx"
							placeholder="输入关键字，搜索课件" placeholderClass="plStyle"></gui-search2>
					</view>
				</view>
				<view class="nav">
					<gui-switch-navigation :items="tabs" :width="650" :size="216" :titleClass="['c666']"
						:titleActiveClass="['colorBlue','gui-bold']" activeDirection="center" activeLineWidth="140rpx"
						textAlign="center" :currentIndex="currentIndex" @change="navchange"></gui-switch-navigation>
				</view>
			</view>
			<swiper :current="currentIndex" @change="swiperChange" :style="{
									height:mainHeight+'px',
									width:'750rpx'
								}">
				<!-- 轮播项目数量对应 上面的选项标签 -->
				<swiper-item>
					<scroll-view :style="{height:mainHeight+'px'}" :scroll-y="true" class="scroll-view-bg">
						<gui-refresh @reload="reload" ref="refreshcom1"></gui-refresh>
						<view class="problem">
							<gui-empty>
								<template v-slot:img>
									<view class="gui-flex gui-rows gui-justify-content-center">
										<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png"
											mode="widthFix">
										</image>
									</view>
								</template>
								<template v-slot:text>
									<text
										class="gui-text-small gui-block gui-text-center gui-margin-top c333">功能暂未开放，敬请期待</text>
									<view style="height: 200rpx;"></view>
								</template>
							</gui-empty>
							<!-- <view class="item" v-for="(item,index) in 2" :key="item.id">
								<view class="title gui-bold">
									<text class="colorRed">[多选]</text>
									<text> 您参加培训的主要目的是</text>
									<text>( )</text>
								</view>
								<view class="ask">
									<view class="ask-item radius f24">
										<view class="check flex-ac-jb">
											<text>A.提高职业技能</text>
											<text class="gui-icons gui-bold">&#xe60f;</text>
										</view>
									</view>
									<view class="ask-item radius ask-item-check f24">
										<view class="check flex-ac-jb">
											<text>B.培养兴趣爱好</text>
											<text class="gui-icons gui-bold">&#xe60f;</text>
										</view>
									</view>
									<view class="ask-item radius ask-item-check f24">
										<view class="check flex-ac-jb">
											<text>C.提升就业创业能力</text>
											<text class="gui-icons gui-bold">&#xe60f;</text>
										</view>
									</view>
									<view class="ask-item radius">
										<view class="check flex-ac-jb f24">
											<text>D.获得就业机会</text>
											<text class="gui-icons gui-bold">&#xe60f;</text>
										</view>
									</view>
									<view class="ask-item radius f24">
										<text>E.其他(请具体说明);</text>
										<view class="textarea radius">
											<textarea placeholder="输入内容" placeholder-class="plStyle" />
										</view>
									</view>
								</view>
							</view> -->
						</view>
						<!-- <view class="problemBtn">
							<view class="saveBtn">提交登记</view>
						</view> -->
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<!-- 使用滚动区域来实现主体内容区域 -->
					<scroll-view :scroll-y="true" :style="{height:mainHeight+'px'}" class="scroll-view-bg"
						@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
						@scrolltolower="loadmorefun" @scroll="scroll">
						<view class="onlineClass bgfff">
							<view class="onlineClass-tab-fixed bgfff" id="tabHeight">
								<scroll-view :scroll-x="true" class="gui-scroll-x" :show-scrollbar="false">
									<view class="onlineClass-tab flex-ac">
										<view class="item radius f24" @click="coursewareTabChange(itemTab)"
											:class="{'itemTab-check':query[1].coursewareTypeId==itemTab.id}"
											v-for="(itemTab,indexTab) in coursewareTypeList" :key="itemTab.id">
											{{itemTab.coursewareTypeName}}
										</view>
									</view>
								</scroll-view>
							</view>
							<view class="tabHeightPlace" :style="{ 'height': tabHeight + 'px' }"></view>
							<gui-refresh @reload="reload" ref="refreshcom2"></gui-refresh>
							<gui-empty v-if="dataList[1].length <= 0">
								<template v-slot:img>
									<view class="gui-flex gui-rows gui-justify-content-center">
										<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png"
											mode="widthFix">
										</image>
									</view>
								</template>
								<template v-slot:text>
									<text
										class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
									<view style="height: 200rpx;"></view>
								</template>
							</gui-empty>
							<view class="onlineClass-list"
								@click="$u.to(`/pages/index/courseware-details?curId=${item.id}`)"
								v-for="(item,index) in dataList[1]" :key="item.id">
								<view class="item flex-ac-jb">
									<view class="onlineClass-headImg">
										<gui-image :src="item.image" :width="146" :height="113" borderRadius="14rpx"
											mode="aspectFill"></gui-image>
									</view>
									<view class="onlineClass-info flex-dc flex1">
										<text class="f30">{{item.title}}</text>
										<text class="f24 c666">{{item.synopsis}}</text>
									</view>
									<text class="gui-icons colorBlue">&#xe601;</text>
								</view>
							</view>
						</view>
						<gui-loadmore ref="loadmorecom1"></gui-loadmore>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<!-- 使用滚动区域来实现主体内容区域 -->
					<scroll-view :scroll-y="true" :style="{height:mainHeight+'px'}" class="scroll-view-bg"
						@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
						@scrolltolower="loadmorefun" @scroll="scroll">
						<view class="training">
							<view class="onlineClass-tab-fixed bgfff" id="tranningTabHeight">
								<view class="onlineClass-tab flex-ac-jb">
									<view class="item flex-ac-jc radius f24"
										:class="{'itemTab-check': item.value == query[2].type}"
										@click="trainChange(item)" v-for="(item,index) in trainTap" :key="item.value">
										{{item.name}}
									</view>
								</view>
							</view>
							<view class="tabHeightPlace" :style="{ 'height': tranningTabHeight + 'px' }"></view>
							<gui-refresh @reload="reload" ref="refreshcom3"></gui-refresh>
							<view class="training-list">
								<gui-empty v-if="dataList[2].length <= 0">
									<template v-slot:img>
										<view class="gui-flex gui-rows gui-justify-content-center">
											<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png"
												mode="widthFix">
											</image>
										</view>
									</template>
									<template v-slot:text>
										<text
											class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
										<view style="height: 200rpx;"></view>
									</template>
								</gui-empty>
								<view class="training-item bgfff radius" v-for="(item,index) in dataList[2]"
									:key="item.id" @tap="$u.to(`/pages/index/training-detail?trainId=${item.id}`)">
									<view class="title flex">
										<view class="title-label flex-ac-jc f24 cfff">预告</view>
										<text class="gui-bold">{{item.title}}</text>
									</view>
									<view class="item-text flex-ac-row f24">
										<text class="item-text-label">报名简章</text>
										<view>{{item.brochure}}</view>
									</view>
									<view class="item-text gui-flex flex-ac-row f24">
										<text class="item-text-label">培训对象</text>
										<view class="gui-flex1 qoverDot">
											{{item.goal}}
										</view>
									</view>
									<view class="item-text flex-ac-row f24">
										<text class="item-text-label">培训时间</text>
										<text>{{item.beginTime}}至{{item.endTime}}</text>
									</view>
									<view class="item-text flex-ac-row f24">
										<text class="item-text-label">培训地址</text>
										<text>{{item.address}}</text>
									</view>
									<view class="item-text flex-ac-row f24">
										<text class="item-text-label">培训人数</text>
										<text>{{item.peopleNumber}}人</text>
									</view>
									<view class="item-text flex-ac-row f24">
										<text class="item-text-label">报名截止</text>
										<text class="colorRed">{{item.deadline}}</text>
									</view>
									<view class="item-text flex-ac-jb f24">
										<view class="left">
											<text class="item-text-label">报名状态</text>
											<text class="colorBlue">{{(item.status == 0) ? '已报名' : '未报名'}}</text>
										</view>
										<view class="saveBtn radius">查看详情</view>
									</view>
								</view>
							</view>
						</view>
						<gui-loadmore ref="loadmorecom2"></gui-loadmore>
					</scroll-view>
				</swiper-item>
			</swiper>
		</template>
	</gui-page>
</template>

<script setup>
	import graceJS from "@/Grace6/js/grace.js"
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getCourseWareTypeList,
		getCourseWareList,
		getTrainList
	} from '@/api/user.js';
	const $u = reactive(inject('$u'))
	const tabs = ref([{
			id: 1,
			name: '职业培训'
		},
		{
			id: 2,
			name: '线上课件'
		},
		{
			id: 3,
			name: '培训报名'
		}
	])
	const currentIndex = ref(0)
	const mainHeight = ref(200)
	const guipage = ref(null)
	const tabHeight = ref(0)
	const tranningTabHeight = ref(0)
	const loadmorecom1 = ref(null)
	const loadmorecom2 = ref(null)
	const loadmorecom = ref([loadmorecom1, loadmorecom2])
	const refreshcom1 = ref(null);
	const refreshcom2 = ref(null);
	const refreshcom3 = ref(null);
	const refreshcom = ref([refreshcom1, refreshcom2, refreshcom3])
	// 滚动延迟
	const scrollTimer = ref(null)
	// 加载更多延迟
	const loadMoreTimer = ref(null)
	const scrollTops = ref([])
	const apiLoadStatus = ref([])
	const pageLoading = ref(true);
	const noData = ref([false, false, false])
	// 查询条件
	const query = ref([{
		pageNum: 1,
		pageSize: 10
	}, { // 线上课件
		pageNum: 1,
		pageSize: 10,
		coursewareTypeId: ''
	}, {
		pageNum: 1,
		pageSize: 10,
		type: '1'
	}])

	onLoad(() => {
		// 01. 获取页面主体高度
		setTimeout(() => {
			graceJS.getRefs(guipage, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					graceJS.select('#header', (e2) => {
						mainHeight.value = e.height - e2.height;
					})
					graceJS.select('#tabHeight', (e3) => {
						tabHeight.value = e3.height
					})
					graceJS.select('#tranningTabHeight', (e4) => {
						tranningTabHeight.value = e4.height
					})
				});
				loadCom();
			});
		}, 200)

	})
	const navchange = (idx) => {
		currentIndex.value = idx;
	}
	const swiperChange = (e) => {
		let index = e.detail.current;
		currentIndex.value = index;
		loadCom();
	}

	const loadCom = () => {
		if (!dataList.value[currentIndex.value]) {
			return;
		}
		if (dataList.value[currentIndex.value].length < 1) {
			loadData();
		}
	}

	const coursewareTypeList = ref([])
	const trainTap = [{
		name: '市本级培训',
		value: '1'
	}, {
		name: '县市级培训',
		value: '2'
	}]
	const dataList = ref([
		[],
		[],
		[]
	]);

	// 滚动区域滚动
	const scroll = (e) => {
		if (scrollTimer.value != null) {
			clearTimeout(scrollTimer.value);
		}
		scrollTimer.value = setTimeout(() => {
			scrollTops.value.splice(currentIndex.value, 1, e.detail.scrollTop);
		}, 100);
	}
	// 下拉刷新相关事件绑定
	const touchstart = (e) => {
		if (apiLoadStatus.value[currentIndex.value]) {
			return;
		}
		if (scrollTops.value[currentIndex.value] > 0) {
			return;
		}
		refreshcom.value[currentIndex.value].value.touchstart(e);
	}

	const touchmove = (e) => {
		if (apiLoadStatus.value[currentIndex.value]) {
			return;
		}
		if (scrollTops.value[currentIndex.value] > 0) {
			return;
		}
		refreshcom.value[currentIndex.value].value.touchmove(e);
	}
	const touchend = (e) => {
		if (apiLoadStatus.value[currentIndex.value]) {
			return;
		}
		if (scrollTops.value[currentIndex.value] > 0) {
			return;
		}
		refreshcom.value[currentIndex.value].value.touchend(e);
	}
	// 刷新事件
	const reload = (isReload = true) => {
		query.value[currentIndex.value].pageNum = 1;
		loadmorecom.value[currentIndex.value-1].value.stoploadmore();
		loadData(isReload);
	}
	// 加载更多事件
	const loadmorefun = () => {
		let currentIndex = currentIndex.value - 1;
		if (apiLoadStatus.value[currentIndex]) {
			return;
		}
		// 获取加载组件状态看一下是否还能继续加载
		if (loadmorecom.value[currentIndex].value.loadMoreStatus != 0) {
			return;
		}
		// 保证触底只执行一次加载
		if (loadMoreTimer.value != null) {
			clearTimeout(loadMoreTimer.value);
		}
		loadMoreTimer.value = setTimeout(() => {
			loadmorecom.value[currentIndex].value.loading();
			// 此处开启加载动画执行加载数据的函数
			loadData();
		}, 80);
	}

	// 加载线上课件分类
	const loadType = () => {
		getCourseWareTypeList().then(res => {
			if (res.code == 200) {
				coursewareTypeList.value = res.data;
				query.value[1].coursewareTypeId = res.data[0].id;
			}
		})
	}
	// 课件分类切换
	const coursewareTabChange = (item) => {
		query.value[1].coursewareTypeId = item.id;
		reload(false)
	}
	// 培训报名切换
	const trainChange = (item) => {
		query.value[2].type = item.value;
		reload(false)
	}
	// 加载线上课件分类
	const loadData = (isReload) => {
		let currentValue = currentIndex.value;
		let queryParam = Object.assign(query.value[currentValue], {})
		let requestList = [getCourseWareList, getTrainList, getTrainList];

		requestList[currentValue](queryParam).then(res => {
			if (res.code == 200) {
				let total = Math.ceil(res.total / query.value[currentValue].pageSize);
				// 第一页
				if (query.value[currentValue].pageNum == 1) {
					(res.rows.length <= 0) ? noData.value[currentValue] = true: noData.value[currentValue] =
						false;
					dataList.value.splice(currentValue, 1, res.rows);
				} else {
					dataList.value[currentValue] = dataList.value[currentValue].concat(res.rows);
					loadmorecom.value[currentValue - 1].value.stoploadmore();
					if (query.value[currentValue].pageNum >= total) {
						loadmorecom.value[currentValue - 1].value.nomore();
					}
				}
			}
			// 刷新
			if (isReload) {
				refreshcom.value[currentValue].value.endReload();
			}
			query.value[currentValue].pageNum++;
			// 更新 api 加载状态
			apiLoadStatus.value.splice(currentValue, 1, false);
			pageLoading.value = false;
		})

	}
	loadType();
</script>

<style lang="scss">
	.search {
		padding: 0rpx 34rpx 30rpx 34rpx;
		background: linear-gradient(180deg, #4072FE 0%, #4072FE 100%);

		.border {
			border: 1px solid #ccc;
		}
	}

	.nav {
		padding: 10rpx 50rpx;
	}

	.scroll-view-bg {
		background: linear-gradient(313deg, #79CFFB 0%, #E9F7FF 100%);
	}

	.problem {
		padding-top: 16rpx;
	}

	.onlineClass-tab-fixed {
		position: fixed;
		left: 0;
		top: 0;
		width: 750rpx;
		z-index: 1;

		.onlineClass-tab {
			padding: 23rpx 0 23rpx 53rpx;

			.item {
				background: #F0F0F0;
				padding: 10rpx 42rpx;
				color: #999999;
				margin-right: 19rpx;

				&:last-child {
					margin-right: 0;
				}
			}

			.itemTab-check {
				background: linear-gradient(180deg, #0034C7 0%, #4072FE 100%);
				color: #fff;
			}
		}
	}

	.onlineClass {}

	.onlineClass-list {
		.item {
			padding: 30rpx 47rpx 30rpx 53rpx;
			border-bottom: 1px solid #F5F5F5;

			.onlineClass-headImg {}

			.onlineClass-info {
				margin: 0 20rpx;

				.f24 {
					margin-top: 10rpx;
				}
			}

			.gui-icons {
				font-size: 40rpx;
			}
		}
	}

	.training {
		.onlineClass-tab {
			padding: 23rpx 30rpx 12rpx 30rpx;
			background: #F6FCFF;

			.item {
				width: 300rpx;
				height: 52rpx;
				padding: 0;
				margin: 0;
			}
		}
	}
</style>